import 'package:elephant_fish/http/core/hi_net.dart';
import 'package:elephant_fish/http/request/base_request.dart';
import 'package:elephant_fish/http/request/rank_list_request.dart';
import 'package:elephant_fish/model/anchor.dart';
import 'package:elephant_fish/page/home_page.dart';
import 'package:elephant_fish/util/TxUtils.dart';
import 'package:elephant_fish/util/size_util.dart';
import 'package:elephant_fish/widget/charm_rank_list.dart';
import 'package:elephant_fish/widget/search_list_card.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

import 'login_page.dart';

/// 排行榜魅力榜
class IndexCharmRankPage extends StatefulWidget {
  final String categoryName;

  const IndexCharmRankPage({Key key, this.categoryName}) : super(key: key);

  @override
  _IndexCharmRankPageState createState() => _IndexCharmRankPageState();
}

class _IndexCharmRankPageState extends State<IndexCharmRankPage> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getRankList();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xff101443), Color(0xff6b1f3b)],
        ),
      ),
      child: SingleChildScrollView(
        child: Stack(
          children: [
            ///第一名
            Stack(
              children: [
                Align(
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: EdgeInsets.only(top: SizeUtil.px(178),),
                    child: Container(
                      width: SizeUtil.px(222),
                      height: SizeUtil.px(267),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(SizeUtil.px(18)),bottomRight: Radius.circular(SizeUtil.px(18))),
                        gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          colors: [Color(0xff221641), Color(0xff661e38)],
                        ),
                      ),
                      child:Stack(
                        children: [
                          Align(
                            alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(80)),
                              child: Text(
                                '樱桃爱',
                                style: TextStyle(fontSize: SizeUtil.px(30),color: Color(0xfff3f3f3)),
                              ),
                            ),
                          ),
                          Align(
                            alignment: Alignment.topLeft,
                            child: Padding(
                              padding: EdgeInsets.only(left: SizeUtil.px(20),top: SizeUtil.px(135)),
                              child: Container(
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(SizeUtil.px(6)),),
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [Color(0xff35c2f4), Color(0xff4a8ef5)],
                                  ),
                                ),
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Padding(padding: EdgeInsets.only(left: SizeUtil.px(10),top: SizeUtil.px(6)),
                                      child: Image.asset('assets/images/male.png',width: SizeUtil.px(22),height: SizeUtil.px(22),color: Color(0xffffffff),),
                                    ),
                                    Padding(padding: EdgeInsets.only(left: SizeUtil.px(10),top: SizeUtil.px(8),right: SizeUtil.px(10),bottom: SizeUtil.px(6)),
                                    child: Text('28',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xffffffff)),),)
                                  ],
                                ),

                              ),
                            ),
                          ),
                          Align(
                            alignment: Alignment.topRight,
                            child: Padding(
                              padding: EdgeInsets.only(right: SizeUtil.px(20),top: SizeUtil.px(135)),
                              child: Container(
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(SizeUtil.px(6)),),
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [Color(0xfffabc2c), Color(0xffffa00b)],
                                  ),
                                ),
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Padding(padding: EdgeInsets.only(left: SizeUtil.px(10),top: SizeUtil.px(8),right: SizeUtil.px(10),bottom: SizeUtil.px(6)),
                                      child: Text('造物主',style: TextStyle(fontSize: SizeUtil.px(18),color: Color(0xffffffff)),),)
                                  ],
                                ),

                              ),
                            ),
                          ),
                          Align(
                            alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(175)),
                              child: Image.asset('assets/images/rank_money.png',width: SizeUtil.px(50),height: SizeUtil.px(50),),
                            ),
                          ),
                          Align(
                            alignment: Alignment.bottomCenter,
                            child: Padding(
                              padding: EdgeInsets.only(bottom: SizeUtil.px(10)),
                              child: Text('9545',style: TextStyle(fontSize: SizeUtil.px(32),color: Color(0xfffe4b53)),),
                            ),
                          ),


                        ],
                      )
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: EdgeInsets.only(top: SizeUtil.px(104)),
                    child: Stack(
                      children: [
                        Align(
                          alignment: Alignment.topCenter,
                          child: Padding(
                            padding: EdgeInsets.only(top: SizeUtil.px(25)),
                            child: CircleAvatar(
                              radius: SizeUtil.px(60),
                              backgroundImage: NetworkImage('https://img1.baidu.com/it/u=1340127580,1407454083&fm=26&fmt=auto&gp=0.jpg'),
                              child: Container(
                                width: SizeUtil.px(100),
                                height: SizeUtil.px(100),
                              ),
                            ),
                          )
                        ),
                        Align(
                          alignment: Alignment.topCenter,
                          child:  Container(
                            width: SizeUtil.px(160),
                            height: SizeUtil.px(160),
                            child:  Image.asset('assets/images/rank_head_box.png'),
                          ),
                        ),
                        Align(
                          alignment: Alignment.topCenter,
                          child: Padding(
                            padding: EdgeInsets.only(top: SizeUtil.px(110)),
                            child: Image.asset("assets/images/level_bg.png"),
                          ),
                        ),
                        Align(
                          alignment: Alignment.topCenter,
                          child: Padding(
                            padding: EdgeInsets.only(top: SizeUtil.px(116)),
                            child: Text('等级: L6',style: TextStyle(fontSize: SizeUtil.px(16),color: Color(0xffffffff)),),
                          ),
                        ),

                      ],
                    ),
                  )
                ),
                Align(
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: EdgeInsets.only(left: SizeUtil.px(80),top: SizeUtil.px(80)),
                    child: Image.asset('assets/images/rank_1.png'),
                  ),
                )
              ],
            ),
            ///第二名
            Stack(
              children: [

                Align(
                  alignment: Alignment.topLeft,
                  child: Padding(
                    padding: EdgeInsets.only(left:size.width - SizeUtil.px(720),top: SizeUtil.px(203),),
                    child: Container(
                      width: SizeUtil.px(222),
                      height: SizeUtil.px(267),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(SizeUtil.px(18)),bottomRight: Radius.circular(SizeUtil.px(18))),
                        gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          colors: [Color(0xff221641), Color(0xff661e38)],
                        ),
                      ),
                      child:Stack(
                        children: [
                          Align(
                            alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(80)),
                              child: Text(
                                '樱桃爱',
                                style: TextStyle(fontSize: SizeUtil.px(30),color: Color(0xfff3f3f3)),
                              ),
                            ),
                          ),
                          Align(
                            alignment: Alignment.topLeft,
                            child: Padding(
                              padding: EdgeInsets.only(left: SizeUtil.px(20),top: SizeUtil.px(135)),
                              child: Container(
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(SizeUtil.px(6)),),
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [Color(0xff35c2f4), Color(0xff4a8ef5)],
                                  ),
                                ),
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Padding(padding: EdgeInsets.only(left: SizeUtil.px(10),top: SizeUtil.px(6)),
                                      child: Image.asset('assets/images/male.png',width: SizeUtil.px(22),height: SizeUtil.px(22),color: Color(0xffffffff),),
                                    ),
                                    Padding(padding: EdgeInsets.only(left: SizeUtil.px(10),top: SizeUtil.px(8),right: SizeUtil.px(10),bottom: SizeUtil.px(6)),
                                      child: Text('28',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xffffffff)),),)
                                  ],
                                ),

                              ),
                            ),
                          ),
                          Align(
                            alignment: Alignment.topRight,
                            child: Padding(
                              padding: EdgeInsets.only(right: SizeUtil.px(20),top: SizeUtil.px(135)),
                              child: Container(
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(SizeUtil.px(6)),),
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [Color(0xfffabc2c), Color(0xffffa00b)],
                                  ),
                                ),
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Padding(padding: EdgeInsets.only(left: SizeUtil.px(10),top: SizeUtil.px(8),right: SizeUtil.px(10),bottom: SizeUtil.px(6)),
                                      child: Text('造物主',style: TextStyle(fontSize: SizeUtil.px(18),color: Color(0xffffffff)),),)
                                  ],
                                ),

                              ),
                            ),
                          ),
                          Align(
                            alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(175)),
                              child: Image.asset('assets/images/rank_money.png',width: SizeUtil.px(50),height: SizeUtil.px(50),),
                            ),
                          ),
                          Align(
                            alignment: Alignment.bottomCenter,
                            child: Padding(
                              padding: EdgeInsets.only(bottom: SizeUtil.px(10)),
                              child: Text('9545',style: TextStyle(fontSize: SizeUtil.px(32),color: Color(0xfffe4b53)),),
                            ),
                          ),


                        ],
                      )
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.topLeft,
                  child: Padding(
                    padding: EdgeInsets.only(top: SizeUtil.px(104)),
                    child: Stack(
                      children: [
                        Align(
                          alignment: Alignment.topLeft,
                          child: Padding(
                            padding: EdgeInsets.only(left:size.width - SizeUtil.px(670),top: SizeUtil.px(50)),
                            child: CircleAvatar(
                              radius: SizeUtil.px(60),
                              backgroundImage: NetworkImage('https://img1.baidu.com/it/u=1340127580,1407454083&fm=26&fmt=auto&gp=0.jpg'),
                              child: Container(
                                width: SizeUtil.px(100),
                                height: SizeUtil.px(100),
                              ),
                            ),
                          )
                        ),
                        Align(
                          alignment: Alignment.topLeft,
                          child: Padding(
                            padding: EdgeInsets.only(left: size.width - SizeUtil.px(690),top: SizeUtil.px(30)),
                            child:  Container(
                              width: SizeUtil.px(160),
                              height: SizeUtil.px(160),
                              child:  Image.asset('assets/images/rank_head_box.png'),
                            ),
                          )
                        ),
                        Align(
                          alignment: Alignment.topLeft,
                          child: Padding(
                            padding: EdgeInsets.only(left:size.width - SizeUtil.px(715),top: SizeUtil.px(140)),
                            child: Image.asset("assets/images/level_bg.png"),
                          ),
                        ),
                        Align(
                          alignment: Alignment.topLeft,
                          child: Padding(
                            padding: EdgeInsets.only(left:size.width - SizeUtil.px(638),top: SizeUtil.px(145)),
                            child: Text('等级: L6',style: TextStyle(fontSize: SizeUtil.px(16),color: Color(0xffffffff)),),
                          ),
                        ),

                      ],
                    ),
                  )
                ),
                Align(
                  alignment: Alignment.topLeft,
                  child: Padding(
                    padding: EdgeInsets.only(left:size.width -  SizeUtil.px(600),top: SizeUtil.px(131)),
                    child: Image.asset('assets/images/rank_2.png'),
                  ),
                )
              ],
            ),
            ///第三名
            Stack(
              children: [

                Align(
                  alignment: Alignment.topRight,
                  child: Padding(
                    padding: EdgeInsets.only(right:size.width - SizeUtil.px(720),top: SizeUtil.px(203),),
                    child: Container(
                      width: SizeUtil.px(222),
                      height: SizeUtil.px(267),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(SizeUtil.px(18)),bottomRight: Radius.circular(SizeUtil.px(18))),
                        gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          colors: [Color(0xff221641), Color(0xff661e38)],
                        ),
                      ),
                      child:Stack(
                        children: [
                          Align(
                            alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(80)),
                              child: Text(
                                '樱桃爱',
                                style: TextStyle(fontSize: SizeUtil.px(30),color: Color(0xfff3f3f3)),
                              ),
                            ),
                          ),
                          Align(
                            alignment: Alignment.topLeft,
                            child: Padding(
                              padding: EdgeInsets.only(left: SizeUtil.px(20),top: SizeUtil.px(135)),
                              child: Container(
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(SizeUtil.px(6)),),
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [Color(0xff35c2f4), Color(0xff4a8ef5)],
                                  ),
                                ),
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Padding(padding: EdgeInsets.only(left: SizeUtil.px(10),top: SizeUtil.px(6)),
                                      child: Image.asset('assets/images/male.png',width: SizeUtil.px(22),height: SizeUtil.px(22),color: Color(0xffffffff),),
                                    ),
                                    Padding(padding: EdgeInsets.only(left: SizeUtil.px(10),top: SizeUtil.px(8),right: SizeUtil.px(10),bottom: SizeUtil.px(6)),
                                      child: Text('28',style: TextStyle(fontSize: SizeUtil.px(22),color: Color(0xffffffff)),),)
                                  ],
                                ),

                              ),
                            ),
                          ),
                          Align(
                            alignment: Alignment.topRight,
                            child: Padding(
                              padding: EdgeInsets.only(right: SizeUtil.px(20),top: SizeUtil.px(135)),
                              child: Container(
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(SizeUtil.px(6)),),
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [Color(0xfffabc2c), Color(0xffffa00b)],
                                  ),
                                ),
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Padding(padding: EdgeInsets.only(left: SizeUtil.px(10),top: SizeUtil.px(8),right: SizeUtil.px(10),bottom: SizeUtil.px(6)),
                                      child: Text('造物主',style: TextStyle(fontSize: SizeUtil.px(18),color: Color(0xffffffff)),),)
                                  ],
                                ),

                              ),
                            ),
                          ),
                          Align(
                            alignment: Alignment.topCenter,
                            child: Padding(
                              padding: EdgeInsets.only(top: SizeUtil.px(175)),
                              child: Image.asset('assets/images/rank_money.png',width: SizeUtil.px(50),height: SizeUtil.px(50),),
                            ),
                          ),
                          Align(
                            alignment: Alignment.bottomCenter,
                            child: Padding(
                              padding: EdgeInsets.only(bottom: SizeUtil.px(10)),
                              child: Text('9545',style: TextStyle(fontSize: SizeUtil.px(32),color: Color(0xfffe4b53)),),
                            ),
                          ),


                        ],
                      )
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.topRight,
                  child: Padding(
                    padding: EdgeInsets.only(top: SizeUtil.px(104)),
                    child: Stack(
                      children: [
                        Align(
                            alignment: Alignment.topRight,
                            child: Padding(
                              padding: EdgeInsets.only(right:size.width - SizeUtil.px(670),top: SizeUtil.px(50)),
                              child: CircleAvatar(
                                radius: SizeUtil.px(60),
                                backgroundImage: NetworkImage('https://img1.baidu.com/it/u=1340127580,1407454083&fm=26&fmt=auto&gp=0.jpg'),
                                child: Container(
                                  width: SizeUtil.px(100),
                                  height: SizeUtil.px(100),
                                ),
                              ),
                            )
                        ),
                        Align(
                            alignment: Alignment.topRight,
                            child: Padding(
                              padding: EdgeInsets.only(right: size.width - SizeUtil.px(690),top: SizeUtil.px(30)),
                              child:  Container(
                                width: SizeUtil.px(160),
                                height: SizeUtil.px(160),
                                child:  Image.asset('assets/images/rank_head_box.png'),
                              ),
                            )
                        ),
                        Align(
                          alignment: Alignment.topRight,
                          child: Padding(
                            padding: EdgeInsets.only(right:size.width - SizeUtil.px(715),top: SizeUtil.px(140)),
                            child: Image.asset("assets/images/level_bg.png"),
                          ),
                        ),
                        Align(
                          alignment: Alignment.topRight,
                          child: Padding(
                            padding: EdgeInsets.only(right:size.width - SizeUtil.px(638),top: SizeUtil.px(145)),
                            child: Text('等级: L6',style: TextStyle(fontSize: SizeUtil.px(16),color: Color(0xffffffff)),),
                          ),
                        ),

                      ],
                    ),
                  )
                ),
                Align(
                  alignment: Alignment.topRight,
                  child: Padding(
                    padding: EdgeInsets.only(right:size.width -  SizeUtil.px(690),top: SizeUtil.px(131)),
                    child: Image.asset('assets/images/rank_3.png'),
                  ),
                )
              ],
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Padding(
                padding: EdgeInsets.only(
                  left: SizeUtil.px(12),
                  top: SizeUtil.px(6),
                ),
                child: Container(
                  width: size.width - SizeUtil.px(24),
                  height: SizeUtil.px(483),
                  child: Image.asset('assets/images/rank_box.png'),
                ),
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Padding(padding: EdgeInsets.only(left:(size.width - SizeUtil.px(134))/2,top: SizeUtil.px(56)),
                child: Text(
                  '魅力排行榜',
                  style: TextStyle(fontSize: SizeUtil.px(27),color: Color(0xffffffff)),
                ),
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Padding(
                padding: EdgeInsets.only(left: SizeUtil.px(205),top: SizeUtil.px(505)),
                child:Row(
                  children: _getTabs(),
                )
                  
              ),
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Padding(
                padding: EdgeInsets.only(left: SizeUtil.px(30),top: SizeUtil.px(573),right: SizeUtil.px(30)),
                child:Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(SizeUtil.px(30)),),
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Color(0xff1f153f), Color(0xff641d3b)],
                    ),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    children: _getTabsView(_currentSelectIndex),
                  ),
                )
              ),
            ),
          ],
        ),
      ),
    ));
  }

  int _currentSelectIndex = 0;

  List<Widget> _getTabs() {
    List<Widget> tabWidgets = List();
    for (int i = 0; i < 2; i++) {
      tabWidgets.add(new Padding(padding: EdgeInsets.only(left: i == 0 ? 0 : SizeUtil.px(120)),
      child:  new GestureDetector(
        onTap: () {
          setState(() {
            _currentSelectIndex = i;
          });
        },
        child: new Container(
          child: Text(
            i == 0 ? "日榜单" : "月榜单",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: _currentSelectIndex == i
                  ? SizeUtil.px(40)
                  : SizeUtil.px(32),
              color: _currentSelectIndex == i
                  ? Color(0xffe1e1e1)
                  : Color(0xfff3f3f3)),
          ),
        )),)

       );
  }
    return tabWidgets;
  }
  List<Widget> _getTabsView(int currentSelectIndex) {
    ScrollController _scrollController = ScrollController();
    List<Widget> tabWidgets = List();
    List<Anchor> tabList = [];

    if(currentSelectIndex == 0){
      for(int i = 0 ; i < 30;i++){
        Anchor anchor = Anchor(10000+i, '张三' + i.toString(), 'https://img1.baidu.com/it/u=729283109,1369002854&fm=26&fmt=auto&gp=0.jpg',level: (i+1),money: 105+i);
        tabList.add(anchor);

      };
      tabWidgets.add( Expanded(child:
      ListView.builder(
        itemCount: tabList.length,
        controller: _scrollController,
        shrinkWrap: true,
        itemBuilder:(context,index){
          // return CharmRankList(anchor: tabList[index],);
        }
      ),
      ),);
    }else{
      for(int i = 0 ; i < 10;i++){
        Anchor anchor = Anchor(10000+i, '张三' + i.toString(), 'https://img1.baidu.com/it/u=729283109,1369002854&fm=26&fmt=auto&gp=0.jpg',level: (i+1),money: 105+i);
        tabList.add(anchor);

      };
      tabWidgets.add( Expanded(child:
      ListView.builder(
        itemCount: tabList.length,
        controller: _scrollController,
        shrinkWrap: true,
        itemBuilder:(context,index){
          // return CharmRankList(anchor: tabList[index],);
        }
      ),
      ),);
    }
    return tabWidgets;
  }

  ///获取排行榜
  getRankList() async {
    BaseRequest request = RankListRequest(0);
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String appToken = prefs.getString('app-token');
    request.addHeader('usertoken', appToken);
    var result = await HiNet.getInstance().fire(request);
    print(result);
    if (result['code'] == -1) {
      TxUtils.showErrorToast('登录失效，请重新登录', context);
      Navigator.pop(context);
      Navigator.of(context).push(MaterialPageRoute(
        builder: (context) {
          return LoginPage(arguments: {'loginCode':'-1'},);
        },
      ));
    }
  }

}
